<template>
  <div class="pre-order">
    <h1 class="confirm-title">确认订单</h1>
    <el-table :data="data" style="width: 100%">
      <el-table-column align="center" label="充值产品">
        <template v-slot="{ row }">
          <img
            style="vertical-align: middle"
            width="40%"
            :src="row.imageUrl"
            alt=""
          />
          &nbsp;
          <span style="color: #f4c14f; font-weight: bolder"></span>
          <br />
          <span>{{ data.imageUrl }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="price" label="单价">
        <template v-slot="{ row }">
          <span class="price">
            {{ row.price }}
          </span>
        </template>
      </el-table-column>
      <!-- 数量 -->
      <el-table-column align="center" prop="address" label="数量">
        <template v-slot="{ row }">
          <el-input-number
            v-model="quantity"
            size="mini"
            :min="1"
            :max="data[0].inventory"
            label="描述文字"
          ></el-input-number>
          <i v-if="false">{{ row }}</i>
        </template>
      </el-table-column>
      <!-- 小计 -->
      <el-table-column align="center" prop="address" label="小计">
        <template>
          <span class="total_fee">{{ total_fee }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="total-fee">
      <div class="box-wrap">
        <div class="box-shadow">
          <span class="realpay--title">实付款：</span>
          <span class="realpay--price-symbol">¥</span>
          <span class="realpay--price" style="color: rgb(255, 80, 0)">
            {{ total_fee }}
          </span>
          <div class="order-confirmAddr">
            <div class="confirmAddr-addr-user">
              <span class="confirmAddr-title">充值详情：</span>
              <span class="confirmAddr-pro">
                尊贵vip3充值-vip包月服务,心悦vip3,尊贵体验,强行踢人下线,你值得拥有
              </span>
            </div>
            <div class="confirmAddr-addr">
              <span class="confirmAddr-title"></span>
              <span class="confirmAddr-usn">{{ userInfo.nickname }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button type="danger" @click="commitorder">提交订单</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { preorder } from "@/api/pay";
export default {
  computed: {
    ...mapState({
      data: (state) => [state.currentproduct],
      userInfo: (state) => [state.userInfo],
    }),
    total_fee() {
      // 总价
      return (this.quantity * this.data[0].price).toFixed(2);
    },
  },

  data() {
    return {
      quantity: 1,
    };
  },
  methods: {
    commitorder() {
      this.$confirm("真的要不", "提交不", { type: "warning" })
        .then(async () => {
          let orderres = await preorder(this.data[0].product_id, this.quantity);

          this.$router.push({
            name: "pay",
            query: {
              order_id: orderres.data.order_id,
            },
          });
        })
        .catch(() => {
          this.$message.error("取消了");
        });
    },
  },
};
</script>
<style lang="less" scoped>
div {
  line-height: 40px;
}
</style>
